﻿$(function () {
    var map = $(".map-bg"), ratio, pageHeight;
    map.attr("src", "img/map_bg.png").load(function () {
        $("#map-countries").css("opacity", "1");
        init();
    });
    $("#map-countries").css("opacity", "1");
    init();
    //鼠标悬浮于地图上方后，板块高亮
    $("#countrymap area").hover(function () {
        $("#map-countries .country-" + $(this).data("country")).addClass("active");
    }, function () {
        $("#map-countries .country-" + $(this).data("country")).removeClass("active");
    }
    );
    $(window).resize(function () {
        init();
    });

    //初始化自定义滚轴
    $(".story .popup-layout,.about .popup-layout,.timeline .popup-layout").mCustomScrollbar({
        axis: "y", // vertical scrollbar
        scrollInertia: 600, callbacks: {
            whileScrolling: function () {
                addAnimation(0.15);
            }
        }
    });

    //初始化时间轴动画效果
    $(".menu .btn-timeline").click(function () {
        $(this).find("a").removeClass("active").removeAttr("style");
        addAnimation(0.15, true);
    });

    //给时间点添加动画
    function addAnimation(delaySpace, isSerial) {
        delaySpace = delaySpace ? delaySpace : 0;
        $(".popup-wrapper.timeline a").each(function (index, element) {
            var currentTop = Math.abs($("#mCSB_3_container").css("top").replace("px", ""));
            var offset = $(this).position();
            var elementTop = offset.top;
            var delaytime = isSerial ? (index * delaySpace + 's') :delaySpace+ "s";
            if ((elementTop >= currentTop) && (elementTop + 0.04 * pageHeight) <= (currentTop + pageHeight)) {
                $(this).addClass("active").css({ "-moz-animation-delay": delaytime, "-o-animation-delay": delaytime, "-webkit-animation-delay": delaytime, "animation-delay": delaytime });
            }
            else {
                $(this).removeClass("active");
            }
        });
    }

    //各类元素属性重置
    function init() {
        pageHeight = $(window).height();
        $("#map-countries").width(map.width()).height(map.height()).css("left", ($(".wrapper").width() - map.width()) / 2 + "px");
        $(".wrapper").css("margin-top", ($(window).height() - map.height()) / 2 + "px");
        $(".map-mask").width(map.width()).height(map.height()).css("left", ($(".wrapper").width() - map.width()) / 2 + "px");
        if (($(window).width() / $(window).height()) < 1.9) {
            $(".menu").addClass("sp");
        }
        else {
            $(".menu").removeClass("sp");
        }
        ratio = map.width() / 1572;
        //地图板块边界坐标重置
        $("#countrymap area").each(function (index, element) {
            var coords = $(this).data("coords");

            var newCoords = "";
            arr = coords.split(",");
            for (var i = 0; i < arr.length; i++) {
                arr[i] = parseInt(arr[i] * ratio);
            }
            newCoords = arr.join();
            $(this).attr("coords", newCoords);
        });
        $(".menu a").each(function (index, element) {
            $(this).height($(this).width() * $(this).data("height") / $(this).data("width"));
        });
    }
});